const box = document.querySelector('.box')
// 分类盒子
 const cateBox = document.querySelector('.category')
// 筛选盒子
 const filterBox = document.querySelector('.filter')
// 折扣盒子
 const saleTypeBox = document.querySelector('.saleType')
// 排列盒子
 const sortBox = document.querySelector('.sort')
// select 框
 const sel_btn = document.querySelector('select')
// 搜索框
 const inp = document.querySelector('.searchBox input')
// 多少页
 const pageInfoBox = document.querySelector('.pageInfo')
// 渲染页面盒子
 const contentBox = document.querySelector('.centen')
 var next_btn = document.querySelector('.next')
 var prev_btn = document.querySelector('.prev')
//
var count = 1;
//一页4个
var pagesize = 4;
var totall = 1;
getGoodsList()
async function getGoodsList(){
    //发送请求
    const res = await pAjax({
        url :'/dt?code=3e6bff6304c547dba650d9941aa472c0&searchWord=(channelId%3D38350)+and+(psale%3D0)&pageNo=1&pageSize=32&siteId=2&aggs=&filterJsonUrl=https%3A%2F%2Fwww.haier.com%2Fcn%2Flaundry%2Ffilter_es.json&orderBy=saleFlag%3Adesc%2CproductSaleDate%3Adesc&filter=&defaultSearch=(channelId%3D38350)+and+(psale%3D0)&retFilterJson=yes&searchColumns=productShowLabel',
        dataType:'JSON'
    })
    console.log(res.page.data)
    contentBox.innerHTML = ''
    var bind =res.page.data.slice((count - 1) * pagesize , count * pagesize)
    bind.forEach(function(item){
        contentBox.innerHTML += `
        <li>
        <div class="show">
          <img data-id="${item.metaDataId}" src="https://image.haier.com/cn/laundry/W020210623523471122328_350.png" alt="">
        </div>
        <div class="info">
          <p class="title"> ${item.pname}</p>
          <p class="pp">${item.modelno}</p>
          <p class="price">
            <span class="current">参考价：${item.price}</span>
          </p>
          <p>${item.promoteUrlCounts}家电商网在售</p>
          <p>
            <button data-id="${item.metaDataId}">加入购物车</button>
          </p>
        </div>
      </li>
        `
    });
    // 总页数
     totall  = ( Math.ceil(res.page.data.length / pagesize))
    pageInfoBox.innerHTML = count + ' / ' +  totall 
    prev_btn.className = count <= 1 ? 'prev active' : 'prev'
    next_btn.className = count >=  totall ? 'next active' : 'next'
        // xiayiye
}
next_btn.onclick = function(){
    if(count >=totall) return
    count ++;
    getGoodsList()
}
// 上一页
prev_btn.onclick = function(){
    if(count <= 1)return
    count --;
    getGoodsList()
}     
//改变一页显示多少 onchange
sel_btn.onchange = function(){
    pagesize = sel_btn.value - 0
    console.log(pagesize)
    count = 1
    getGoodsList()
}
// 点击商品
contentBox.addEventListener('click',async e =>{
    e = e || window.event
    const target = e.target || e.srcElement
    if(target.nodeName === 'IMG'){
        const id = target.dataset.id
        window.sessionStorage.setItem('id',id)
        window.location.href = './details.html'
    }
// 判断购物车
     if(target.nodeName === 'BUTTON'){
         console.log(1)
        const goodsId = target.dataset.id
       var goods = res.page.data.find(function(item){return item.metaDataId=== goodsId})
       var list = JSON.parse(window.localStorage.getItem('cart')) || []
       if(!list.length){
           goods.cart_number = 1
        list.push(goods)
       }else{
        var res = list.some(function(item){return item.metaDataId === goodsId})
        if(res){
            var index = list.findIndex(function(item){item.metaDataId === goodsId})
            list[index].cart_number ++
        }else{
            list[index].cart_number = 1
            list.push(goods)
        }
       }
       window.localStorage('cart',JSON.stringify(list))
    }
})












//box.addEventListener('click',(e)=>{
//     e = e || window.event
//     const target = e.target || e.srcElement
    // 类型
    // if(target.className === 'cate'){
    //        for(var i = 0; i <cateBox.children.length; i ++){
    //            cateBox.children[i].classList.remove('active')
    //        }
    //        target.classList.add('active')
    //     //拿到分类内容
    //     const text = e.target.innerText
    //     console.log(text)
    //     current = 1
    // }
    // // 容量
    // if(target.className === 'f'){
    //     for(var i = 0; i <filterBox.children.length; i ++){
    //         filterBox.children[i].classList.remove('active')
    //     }
    //         target.classList.add('active')
    //         const text = e.target.innerText
    //         console.log(text)
    //         current = 1
           
    // }
    // 价格排序
//     res.page.data.sort(function(item){ })
//     console.log(res.page.data)
//     if(target.className === 'sort2'){
//             for(var i = 0; i < sortBox.children.length; i++){
//                 sortBox.children[i].classList.remove('active')
//             }
//                 target.classList.add('active')
//                 getGoodsList()
//         }
// })
